<template>
  <view class="play-container">
    <!-- 关卡进度 -->
    <view class="progress-bar">
      <view 
        v-for="level in 4" 
        :key="level"
        class="level-indicator"
        :class="{ active: currentLevel === level }"
      >
        第{{ level }}关
      </view>
    </view>

    <!-- 题目区域 -->
    <view class="question-area">
      <view class="characters-container" :class="{ 'is-hidden': isTextHidden }">
        <view 
          v-for="(char, index) in currentQuestion.characters" 
          :key="index"
          class="character-item"
          @click="selectCharacter(index)"
        >
          {{ char }}
        </view>
      </view>

      <!-- 音频播放器 -->
      <view class="audio-player">
        <button class="control-btn" @click="playAudio">
          <text class="iconfont">播放</text>
        </button>
      </view>
    </view>

    <!-- 控制按钮组 -->
    <view class="control-group">
      <button class="control-btn" @click="regenerateQuestion">
        重新生成
      </button>
      <button class="control-btn" @click="shuffleCharacters">
        打乱顺序
      </button>
      <button class="control-btn" @click="toggleTextVisibility">
        {{ isTextHidden ? '显示文字' : '隐藏文字' }}
      </button>
    </view>

    <!-- 答题区域 -->
    <view class="answer-area">
      <view class="answer-container">
        <view 
          v-for="(slot, index) in answerSlots" 
          :key="index"
          class="answer-slot"
          @click="removeAnswer(index)"
        >
          {{ slot }}
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitAnswer">
      确认答案
    </button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// Mock 数据
const mockQuestions = [
  {
    id: 1,
    characters: '春眠不觉晓',
    audio: 'audio_url_1'
  },
  {
    id: 2,
    characters: '处处闻啼鸟',
    audio: 'audio_url_2'
  },
  {
    id: 3,
    characters: '夜来风雨声',
    audio: 'audio_url_3'
  },
  {
    id: 4,
    characters: '花落知多少',
    audio: 'audio_url_4'
  }
]

// 响应式状态
const currentLevel = ref(1)
const currentQuestion = ref({ characters: '' })
const isTextHidden = ref(false)
const answerSlots = ref([])

// 初始化
onMounted(() => {
  loadQuestion(currentLevel.value)
})

// 方法
const loadQuestion = (level) => {
  currentQuestion.value = {
    ...mockQuestions[level - 1],
    characters: mockQuestions[level - 1].characters.split('')
  }
  answerSlots.value = new Array(currentQuestion.value.characters.length).fill('')
}

const playAudio = () => {
  // Mock 播放音频
  uni.showToast({
    title: '正在播放音频...',
    icon: 'none'
  })
}

const selectCharacter = (index) => {
  const emptySlotIndex = answerSlots.value.findIndex(slot => slot === '')
  if (emptySlotIndex !== -1) {
    answerSlots.value[emptySlotIndex] = currentQuestion.value.characters[index]
  }
}

const removeAnswer = (index) => {
  if (answerSlots.value[index] !== '') {
    answerSlots.value[index] = ''
  }
}

const regenerateQuestion = () => {
  loadQuestion(currentLevel.value)
}

const shuffleCharacters = () => {
  const shuffled = [...currentQuestion.value.characters]
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
  }
  currentQuestion.value.characters = shuffled
}

const toggleTextVisibility = () => {
  isTextHidden.value = !isTextHidden.value
}

const submitAnswer = () => {
  const answer = answerSlots.value.join('')
  const correct = answer === mockQuestions[currentLevel.value - 1].characters
  
  if (correct) {
    if (currentLevel.value < 4) {
      currentLevel.value++
      loadQuestion(currentLevel.value)
    } else {
      // 完成所有关卡
      uni.showModal({
        title: '恭喜',
        content: '你已完成所有关卡！',
        showCancel: false,
        success: () => {
          uni.navigateBack()
        }
      })
    }
  } else {
    uni.showToast({
      title: '答案不正确，请重试',
      icon: 'none'
    })
  }
}
</script>

<style>
.play-container {
  padding: 20px;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.level-indicator {
  flex: 1;
  text-align: center;
  padding: 10px;
  margin: 0 5px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.level-indicator.active {
  background-color: #3cc51f;
  color: white;
}

.question-area {
  margin-bottom: 30px;
}

.characters-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.characters-container.is-hidden .character-item {
  color: transparent;
  background-color: #e0e0e0;
}

.character-item {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background-color: #f8f8f8;
  border-radius: 5px;
  cursor: pointer;
}

.audio-player {
  text-align: center;
  margin: 20px 0;
}

.control-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.control-btn {
  flex: 1;
  margin: 0 5px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.answer-area {
  margin-bottom: 30px;
}

.answer-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.answer-slot {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background-color: #f8f8f8;
  border: 2px dashed #ccc;
  border-radius: 5px;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background-color: #3cc51f;
  color: white;
  border-radius: 5px;
}
</style> 